<template>
  <div class="login">
    <div class="form">
      <div class="icon"><img src="../../../assets/login/person-01.png" /></div>
      <van-cell-group inset>
        <van-field
          placeholder="请输入用户名"
          class="field"   
          v-model="name"
          
        />
        <van-field
          placeholder="请输入密码"
          class="field"
          type="password"
          v-model="password"
        />
      </van-cell-group>
      <van-button type="primary" class="loginButtom" @click="login"
        >登陆</van-button
      >
      <div class="bottom">
        <div class="regiest" @click="jump">立即注册</div>
        <div class="line"></div>
        <div class="forget">忘记密码</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, watch,defineEmits } from "vue";
import { post } from "../../../utils/request.js";
import { Toast } from "vant";
import { mapMutations,mapState,mapActions,useStore } from "vuex";
const store=useStore()
const route = useRoute();
const router = useRouter();
const name = ref("17322733294");
const password = ref("123456");
const error=ref("field error");
const coorect=ref("field");
const errorIndex=ref('')
const emit=defineEmits(['regiest'])
// watch([() => name.value, () => password.value], ([newName, newPassword], [oldName, oldPassword])=>{
//                    if (newName.length) {
                  
//                    }
//                     //immediate定义过程后马上触发 常用在页面刷新后做数据的操作 不需要用户通过行为触发
//                 },{immediate:true},{deep: true})
const jump = () => {
    emit("regiest");
  // console.log(name.value,password.value);
  //console.log(post);
};
const login = async () => {
  Toast.loading({
    message: "正在登陆，请稍后...",
    forbidClick: true,
    duration: 0,
  });
  if (!name.value.length||!password.value.length) {
    console.log(name.value.length,password.value.length);
     setTimeout(() => {
      Toast.clear();
      Toast.fail({message:'输入内容不能为空', forbidClick: true,})
    }, 3000);
    return
  }
  const data = {
    password: `${password.value}`,
    phone: `${name.value}`,
  };
let result
  try {
  
    result = await post("/login", data);  
   
  } catch (error) {
    console.log(1111111);
    let timer=setTimeout(() => {
      Toast.clear();
      Toast.fail({message:'登陆失败，请稍后重新登陆', forbidClick: true,})
      clearTimeout(timer)
    }, 3000);
  }
 if (result.status == 200) {
  console.log(111111);
   Toast.clear()
    store.commit("login/getToken",result.data.result)
    if (route.query.redirct) {
      Toast.clear();
      console.log(store.state.login);
      router.push(`${route.query.redirct}`);
    } else {
      router.push("/");
     
    }
 }
  
 
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
    height: 100vh;
  background-color: white;
  .form {
    width: 100%;
    margin-top: 18vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 21.3vw;
      height: 21.3vw;
      margin-bottom: 6vh;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .field {
      margin-top: 2vh;
      width: 78.6vw;
      height: 7vh;
      background-color: #f9f9f9;
    }
    .loginButtom {
      margin-top: 4.7vh;
      width: 78.6vw !important;
      height: 7vh !important;
    }
  }
  .bottom {
    display: flex;
    margin-top: 2.3vh;
    font-size: 4vw;
    opacity: 0.5;
    color: #000000;
    width: 37.3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .line {
      width: 1px;
      height: 2vh;
      background-color: #000000;
    }
  }
  // .error{
  //   border: 1px solid red;
  // }
}
</style>
